import { useState } from 'react'

// [自定义Hook，以 use 开头]
function useToggle() {
	const [isShow, setIsShow] = useState(true)
	const handleToggle = () => setIsShow(!isShow)
	return [isShow, handleToggle]
}

function ZdyHook() {
	// [使用自定义Hook]
	const [isShow, handleToggle] = useToggle()
	const [isShowSpan, handleToggleSpan] = useToggle()

	return (
		<>
			<h2>自定义Hook实现</h2>
			<hr />

			{isShow && <div>DIV</div>}
			<button onClick={handleToggle}>{isShow ? '隐藏' : '显示'}DIV</button>

			<hr />

			{isShowSpan && <span>SPAN</span>}
			<button onClick={handleToggleSpan}>{isShowSpan ? '隐藏' : '显示'}SPAN</button>
		</>
	)
}

export default ZdyHook
